<template>
  <div class="left_content2">
    <div class="title">来源类型</div>
    <ShowEcharts :options="options" :height="height"></ShowEcharts>
  </div>
</template>

<script setup lang="ts">
import { Ref, reactive, ref } from 'vue'
import ShowEcharts from "@/components/ShowEcharts.vue";
// 高度
const height: Ref<string> = ref('3.6458rem');

// 定义data的数据类型形式
let data = ref<{ value: number, name: string }[]>([
  { value: 1048, name: '视频' },
  { value: 735, name: '微博' },
  { value: 580, name: '博客' },
  { value: 484, name: '微信' },
  { value: 300, name: '论坛' }
]);
let sum = data.value.reduce((total, item) => { return total + item.value }, 0);
// console.log(sum);

let options = reactive({
  // 提示信息
  tooltip: {
    trigger: 'item'
  },
  // 调色盘
  color: ['#f1e5d2', '#1f48a6', '#3c6ccf', '#6497ff', '#3dc1a3'],
  series: [
    {
      name: 'Access From',
      type: 'pie',
      // 空心饼图
      radius: ['20%', '50%'],
      // 放置重叠
      avoidLabelOverlap: false,
      // label-文本内容
      label: {
        show: true,
        color: "#fff",
        fontSize: '0.16rem',
        // position: 'center',
        // formatter: '{b}\n{d}%',
        formatter: params => {
          // console.log(params);
          let data = params;
          let perValue = (data.value / sum * 100).toFixed(1)
          if (data.name == '论坛' || data.name == '博客') {
            return `${data.name}\n{colorB|${perValue}%}{bgB|}`
          } else {
            return `${data.name}\n{colorA|${perValue}%}{bgA|}`
          }

        },
        lineHeight: '18',
        rich: {
          colorA: {
            color: '#3bd45f',
            fontSize: '0.2083rem'
          },
          colorB: {
            color: '#ff885f',
            fontSize: '0.2083rem'
          },
          bgA: {
            backgroundColor: {
              image: require('@/assets/images/dir_bottom.png')
            },
            height: 15
          },
          bgB: {
            backgroundColor: {
              image: require('@/assets/images/dir_top.png')
            },
            height: 15
          },
        },
      },

      data: data,
      // 高亮的样式
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

</script>

<style lang="less" scoped>
.title {
  font-size: 0.1458rem;
  margin: -.2604rem 0px 0px .2083rem;
}
</style>
